//1. 渲染学生数据
// 先发送请求获取数据
async function getStudents() {
  try {
    const res = await axios.get("/students");
    //  console.log(res);
    // 将获取到的数据渲染到页面上
    document.querySelector(".list").innerHTML = res.data
      .map((item) => {
        return `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender === 1 ? "女" : "男"}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province + item.city + item.area}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i data-id = ${
              item.id
            } class="bi bi-pen"></i></a>
            <a href="javascript:;" class="text-danger"><i data-id = ${
              item.id
            } class="bi bi-trash"></i></a>
          </td>
        </tr>
    `;
      })
      .join("");
    // 总学员数
    document.querySelector(".total").innerHTML = res.data.length;
    // console.log(res.data); // 测试用
  } catch (e) {
    console.dir(e.response);
  }
}
// 2.删除学生信息
//采取事件委托 获取到删除按钮
document.querySelector("tbody").addEventListener("click", async function (e) {
  // 判断点击的是不是删除 按钮
  if (e.target.classList.contains("bi-trash")) {
    // 向后台发送请求删除数据
    const id = e.target.dataset.id;
    // console.log(id);  //测试用
    try {
      await axios.delete(`/students/${id}`);
      tip("删除成功");
      // 重新渲染数据
      getStudents();
    } catch (e) {
      this.dir(e);
    }
  }
});

// 3. 添加或修改学生数据 需要共用一个模态框
// 修改模态框
const modal = new bootstrap.Modal(document.getElementById("modal"));
// 3.1 给添加数据按钮添加点击事件
document
  .querySelector("#openModal")
  .addEventListener("click", async function () {
    // 清空表单
    document.querySelector("#form").reset();
    // 修改模态框的顶部文字样式 为了和修改学生数据作区分
    document.querySelector(".modal-title").innerHTML = "添加学员";
    //  添加自定义属性
    document.querySelector("#form").dataset.id = "add";

    // 渲染省市区
    await renderP();
    await renderCity();
    await renderArea();

    // 显示模态框
    modal.show();
  });

// 3.2 修改学生数据 同样需要事件委托
document.querySelector(".list").addEventListener("click", async function (e) {
  if (e.target.classList.contains("bi-pen")) {
    const id = e.target.dataset.id;
    // 修改模态框的顶部文字样式 为了和添加学生数据作区分
    document.querySelector(".modal-title").innerHTML = "修改学员信息";
    // 添加自定义属性
    document.querySelector("#form").dataset.id = id;
    //获取当前学生信息
    const res = await axios.get(`/students/${id}`);
    // 渲然数据
    for (const k in res.data) {
      const input = document.querySelector(`[name=${k}]`);
      if (k !== "gender") {
        input !== null && (input.value = res.data[k]);
      } else {
        const genders = document.querySelectorAll("[name=gender]");
        genders[res.data[k]].checked = true;
      }
    }
    // 渲染省市区
    await renderP(res.data.province);
    await renderCity(res.data.city);
    await renderArea(res.data.area);
    // 显示模态框
    modal.show();
  }
});

// 3.3 获取学生的省市区信息并渲染到页面上
const pname = document.querySelector("[name=province]");
const cname = document.querySelector("[name=city]");
async function renderP(province = "") {
  const res = await axios.get("/api/province");
  pname.innerHTML = res.data.map((item) => {
    return ` <option value="${item}">${item}</option>`;
  });
  // console.log(res);
  // 设置默认值
  province && (pname.value = province);
}
// 获取市的信息并渲染
async function renderCity(city = "") {
  const res = await axios.get("/api/city", { params: { pname: pname.value } });
  cname.innerHTML = res.data.map((item) => {
    return ` <option value="${item}">${item}</option>`;
  });
  // console.log(res);
  // 设置默认值
  city && (cname.value = city);
}
// 获取区县的信息并渲染
async function renderArea(area = "") {
  const res = await axios.get("/api/area", {
    params: { pname: pname.value, cname: cname.value },
  });
  if (res.data !== undefined) {
    document.querySelector("[name=area]").innerHTML = res.data.map((item) => {
      return ` <option value="${item}">${item}</option>`;
    });
    // console.log(res);
    // 设置默认值
    area && (document.querySelector("[name=area]").value = area);
  } else {
    document.querySelector(
      "[name=area]"
    ).innerHTML = `<option value="">--- 无---</option>`;
  }
}

// 3.4 设置省市区联动  添加点击事件
document
  .querySelector("[name=province]")
  .addEventListener("change", async function () {
    // 重新渲染市和区  重新调用即可
    await renderCity();
    await renderArea();
  });
// 设置市区联动
document
  .querySelector("[name=city]")
  .addEventListener("change", async function () {
    await renderArea();
  });
  
// 4.提交数据  给“确认”按钮添加点击事件
document.querySelector("#submit").addEventListener("click", async function () {
  // 获取表单数据
  const form = document.querySelector("#form");
  if (form.dataset.id === "add") {
    // 添加学员
    // 4.1 收集数据
    const data = serialize(form, { hash: true });
    // 4.2 由于接口需要数字型的数据，所以需要转换
    for (const k in data) {
      // isNaN() 如果是 NaN 就返回true , 不是 NaN 则返回 false
      if (isNaN(data[k]) === false) {
        data[k] = +data[k];
      }
    }
    const res = await axios.post("/students", data);
    tip(res.message);
    // 隐藏模态框
    modal.hide();
    // 清空表单数据
    form.reset();
    // 重新渲染数据
    getStudents();
  } else {
    // 4.3编辑学员信息
    const id = form.dataset.id;
    // 4.3.1收集数据
    const data = serialize(form, { hash: true });
    // 4.3.2 由于接口需要数字型的数据，所以需要转换
    for (const k in data) {
      // isNaN() 如果是 NaN 就返回true , 不是 NaN 则返回 false
      if (isNaN(data[k]) === false) {
        data[k] = +data[k];
      }
    }
    const res = await axios.put(`/students/${id}`, data);
    tip(res.message);
    // 隐藏模态框
    modal.hide();
    // 清空表单数据
    form.reset();
    // 重新渲染数据
    getStudents();
  }
});
getStudents();
